<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lz
 * @LastEditTime: 2022-01-07 22:55:25
-->
<template>
  <div ref="bottom2_container" style="height: 95%"></div>
</template>
<script>
import {get} from '../../../utils/request'
import { Pie } from '@antv/g2plot';
export default {
  data(){
    return{
      dataArr:[]
    }
  },
  mounted(){
    this.initDate()
  },
  methods:{
    initDate(){
      get('/dashboard/queryDeviceOnlineNumber').then(res=>{
        console.log(3333,res);
        this.dataArr=res.data;
        this.initChart();
      })
    },
    initChart(){
      const pie =new Pie(this.$refs.bottom2_container,{
         appendPadding: 10,
         data:this.dataArr,
         angleField: 'value',
         colorField: 'type',
         radius: 0.8,
          label: {
    type: 'outer',
    content: '{name} {percentage}',
  },
  interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
      });
      pie.render();
    }

  }
}
</script>
<style scoped>

</style>